<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0 auto;
            padding: 0;
        }

        p {
            margin-top: 200px;
            text-align: center;
        }

        table,
        td,
        th {
            border: 1px solid black;
            text-align: center;
        }

        table {
            width: 500px;
        }

        input {
            width: 80px;
        }
    </style>
</head>

<body>
    <p>欢迎光临周围水果店</p>
    <table id="app">
        <tr>
            <th>苹果{{goodsPrice}}￥一斤,折扣{{discount}}折</th>
        </tr>
        <tr>
            <td>请输入您要购买的斤数 <input type="number" v-model="num" @click="change"> </td>
        </tr>
        <tr>
            <td><button @click="buy">结账买单</button></td>
        </tr>
        <tr>
            <td>结账单:总价:{{total}}￥元 折后价:{{zhe}}￥元
                省了{{sheng}}￥元</td>
        </tr>
    </table>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                goodsPrice: 10,
                discount: 8,
                num: 0,
                total: 0,
                zhe: 0,
                sheng: 0
            },
            methods: {
                change(e) {
                    if (this.num <= 0) this.num = 0
                },
                buy() {
                    this.total = this.goodsPrice * this.num,
                        this.zhe = this.goodsPrice * this.num * this.discount / 10,
                        this.sheng = this.goodsPrice * this.num - this.goodsPrice * this.num * this.discount / 10
                }
            }
        })
    </script>
</body>

</html>